import React from 'react';
import _ from 'lodash';
import { useTablePipeline, features } from 'ali-react-table';

import { TjTable } from '@/pages/ETrade/components/index.js';

import { removeEmptyRowData } from '../utils';

export default ({ queryForm, queryUrlForm, stations, tableData, tableHead }) => {
  const [openKeys, onChangeOpenKeys] = React.useState([1]);

  // 处理表头
  const getColumns = (columsValue) => {
    const columns = [];
    // 添加表格第一列标题
    columns.push({
      name: '交易单元',
      align: 'left',
      code: 'name',
      width: 120,
      lock: true,
    });

    const parentNames = Object.keys(_.groupBy(columsValue, 'parentName'));
    parentNames.map((item) => {
      columns.push({
        name: item,
        align: 'center',
        children: [],
      });
    });

    columns.map((colItem, index) => {
      const children = [];
      columsValue.map((item) => {
        if (colItem.name == item.parentName) {
          children.push({
            name: item.name,
            align: 'center',
            width: 100,
            code: item.field,
            features: { sortable: true },
            render: (value) => value ?? '-',
          });
        }
      });
      columns[index].children = children;
    });
    return columns;
  };

  const dataTable = _.cloneDeep(tableData);
  const [dataSource, setDataSource] = React.useState(dataTable);
  const [sorts, setSorts] = React.useState([]);
  /** render */
  const pipeline = useTablePipeline({ components: {} })
    .input({ dataSource, columns: getColumns(tableHead) })
    .primaryKey('id')
    .use(
      features.treeMode({
        openKeys,
        onChangeOpenKeys,
        indentSize: 20,
      }),
    )
    .use(
      features.sort({
        mode: 'single',
        sorts,
        keepDataSource: true,
        onChangeSorts: (params) => {
          setSorts(params);
          if (params.length) {
            const _dataSource = _.cloneDeep(tableData);
            const total = _dataSource[0];
            const spliceData = _dataSource.splice(1);
            const { sortData, noSortData } = removeEmptyRowData(spliceData, params[0].code);

            let newDataSource = [];
            newDataSource = sortData.sort((a, b) => {
              return params[0].order === 'desc'
                ? b[params[0].code] - a[params[0].code]
                : a[params[0].code] - b[params[0].code];
            });

            setDataSource([total, ...newDataSource, ...noSortData]);
            return;
          }

          setDataSource(tableData);
        },
        highlightColumnWhenActive: true,
      }),
    );

  return (
    <TjTable
      style={{
        // '--header-bgcolor': '#434749',
        // '--header-color': 'white',
        // '--border-color': 'rgba(255, 255, 255, 0.1)',
        '--header-row-height': '36px',
        '--font-size': '12px',
        // '--cell-border-vertical': '1px solid rgba(255, 255, 255, 0.1)',
        // '--header-cell-border-vertical': '1px solid rgba(255, 255, 255, 0.1)',
        // '--bgcolor': '#222629',
        // '--color': 'white',
        // '--hover-bgcolor': '#222629',
        '--cell-padding': '4px 5px',
        marginLeft: '24px',
        // border: '1px solid #444',
        borderRadius: '5px',
      }}
      useOuterBorder={true}
      stickyScrollHeight={10}
      useVirtual={{ horizontal: true, vertical: true, header: false }}
      {...pipeline.getProps()}
    />
  );
};
